<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="/static/js/vue.js"></script>
    <script src="/static/js/axios.js"></script>
    <link rel="stylesheet" href="/static/css/Initialization.css">
    <link rel="stylesheet" href="/static/css/countCom.css">
    <link rel="stylesheet" href="/static/css/detailed.css">
</head>
<body>
    <div id="app">
        <header-com></header-com>
        <count-com></count-com>
        <div id="load-content"><!--loading 数据同步显示-->
            <div class="load-text-f">
                <p>交易中……</p>
            </div>
            <div class="load-text-s">
                <p>loading……</p>
            </div>
            <div class="load-img">
                <img src="/static/img/交易界面.png" alt="交易界面" width="536px" height="377px">
            </div>
        </div>
        <div id="detailed-content">
            <div id="tableWrap">
                <table border="1">
                    <tr>
                        <th>交易日期</th>
                        <th>交易金额</th>
                        <th>本次余额</th>
                        <th>手续费</th>
                        <th>摘要</th>
                    </tr>
                    <tr v-for="(message,index) in messages" :key="index">
                        <td>{{message.date}}</td>
                        <td>{{message.amount}}</td>
                        <td>{{message.balance}}</td>
                        <td>{{message.fee}}</td>
                        <td>{{message.postscript}}</td>
                    </tr>
                </table>
            </div>
            <div id="balance-exit">
                <a href="/tokens/logout">
                    <p>退卡</p>
                    <p>Exit</p>
                </a>
            </div>
            <div id="balance-continue">
                <a href="/business">
                    <p>继续</p>
                    <p>Continue</p>
                </a>
            </div>
        </div>
    </div>
    <script src="/static/js/headerCom.js"></script>
    <script src="/static/js/countCom.js"></script>
    <script src="/static/js/detailed.js"></script>
</body>
</html>